
<template>
  <vxe-grid
    resizable
    border
    show-overflow
    height="400"
    :export-config="{}"
    :loading="loading"
    :form-config="tableForm"
    :toolbar-config="tableToolbar"
    :data="tableData"
    :columns="tableColumn"
    @form-submit="findList"
  />
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      tableForm: {
        data: {
          name: '',
          sex: ''
        },
        items: [
          { field: 'name', title: '名字', itemRender: { name: '$input', props: { placeholder: '请输入名称' }}},
          { field: 'sex', title: '性别', titlePrefix: { message: '帮助信息！！！', icon: 'fa fa-info-circle' }, itemRender: { name: '$select', options: [] }},
          { itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' }}, { props: { type: 'reset', content: '重置' }}] }}
        ]
      },
      tableToolbar: {
        export: true,
        custom: true
      },
      tableColumn: [
        { type: 'seq', width: 60 },
        { type: 'checkbox', width: 60 },
        { field: 'name', title: 'Name' },
        { field: 'nickname', title: 'Nickname' },
        { field: 'age', title: 'Age' },
        { field: 'sex', title: 'Sex' },
        { field: 'describe', title: 'Describe', showOverflow: true }
      ],
      sexList: [
        { label: '女', value: '0' },
        { label: '男', value: '1' }
      ]
    }
  },
  created() {
    this.findList()
    this.findSexList()
  },
  methods: {
    findList() {
      this.loading = true
      setTimeout(_ => {
        this.tableData = [
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
          { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 24, address: 'Shanghai' }
        ]
        this.loading = false
      }, 1000)
      // XEAjax.get('/api/user/list', this.tableForm.data).then(data => {
      //   this.tableData = data
      //   this.loading = false
      // })
    },
    async findSexList() {
      // const sexList = await XEAjax.get('/api/conf/sex/list')
      // 异步更新下拉选项
      this.tableForm.items[1].itemRender.options = this.sexList
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  padding: 10px;
  .btn{
    text-align: center;
  }
  .table{
    margin-top: 20px;
    padding: 0 10px;
    h3{
      padding-bottom: 10px;
    }
  }
}
</style>
